<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/swiper.min.css">
    <script src="/js/swiper.min.js"></script>
    <script src="/js/jquery-1.8.3.min.js"></script>
    <script src="/js/qrcode.js"></script>
</head>
<body>
    <header class="header">
        <div class="wrap">
            <div class="logo">
                <img src="/img/logo.png" alt="">
            </div>
            <div class="right-content">
                <div class="link">
                    <a href="/distributor.html" class="link-cell">
                        <span class="icon"><img src="/img/header-icon-1.png" alt=""></span>
                        <span class="name">经销商登录</span>
                    </a>
                    <a href="/quailty.html" class="link-cell">
                        <span class="icon"><img src="/img/header-icon-1.png" alt=""></span>
                        <span class="name">质保查询</span>
                    </a>
                </div>
                <ul class="menu">　
                    <li class="menu-cell active"><a href="/">首页</a></li>
                    <li class="menu-cell"><a href="/brand.html">品牌</a></li>
                    <li class="menu-cell">
                        <a>产品</a>
                        <!-- 产品二级导航 -->
                        <div class="sub-menu">
                            <div class="sub-menu__wrap">
                                <a href="product.html" class="sub-menu__cell">产品介绍</a>
                                <a href="/quoted_part.html" class="sub-menu__cell">产品报价</a>
                            </div>
                        </div>
                    </li>
                    <li class="menu-cell"><a href="/example.html">案例</a></li>
                    <li class="menu-cell"><a href="/news.html">资讯</a></li>
                    <li class="menu-cell"><a href="/store.html">门店</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div class="home linear">
        <div class="banner">
            <div class="swiper-container swiper-container-detail_banner">
                <div class="swiper-wrapper swiper-wrapper-detail">
                    <div class="swiper-slide">
                        <img src="/img/example/banner.png" width="100%">
                    </div>
                    <div class="swiper-slide">
                        <img src="/img/brand/banner.png" width="100%">
                    </div>
                    <div class="swiper-slide">
                        <img src="/img/product/banner.png" width="100%">
                    </div>
                </div>
                <div class="swiper-pagination_banner"></div>
            </div>
        </div>
        <div class="desc">
            <div class="title">品牌介绍</div>
            <div class="sub-title">Brand introduction</div>
            <div class="content">
                <p>源自“Barrier－屏障”一词，意义在于阻隔一切对漆面的伤害，从而保护珍贵的原厂车漆，拒绝对漆面膜作用夸大吹捧，让漆面保护膜回归本质作用。</p>
                <p>新一代黑色膜黑科技，顶级玻璃结晶表面涂层，长效疏水抗污、高亮光、防雨渍、轻微划痕自愈完美结合。</p>
                <div class="imgs">
                    <img src="/img/home/desc-1.png">
                    <img src="/img/home/desc-2.png">
                </div>
            </div>
            <div class="video">
                <video width="100%" height="100%" controls="" __idm_id__="344554497" preload="true">
                    <source src="http://byafilm.sunthink.com.cn/attached/media/20210704/1.mp4" type="video/mp4">
                </video>
            </div>
            <a href="/brand.html" class="more">了解更多</a>
        </div>
        <div class="example">
            <div class="title">案例展示</div>
            <div class="sub-title">case show</div>
            <div class="imgs">
                <div class="swiper-container swiper-container-example">
                    <div class="swiper-wrapper swiper-wrapper-detail">
                        <div class="swiper-slide">
                            <img src="/img/home/example-1.png" width="100%">
                            <p class="name">梅赛德斯-奔驰 AMG C</p>
                        </div>
                        <div class="swiper-slide">
                            <img src="/img/home/example-2.png" width="100%">
                            <p class="name">奔驰CLS</p>
                        </div>
                        <div class="swiper-slide">
                            <img src="/img/home/example-1.png" width="100%">
                            <p class="name">梅赛德斯-奔驰 AMG C</p>
                        </div>
                    </div>
                    <div class="swiper-pagination_banner"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </div>
        <div class="news">
            <div class="title">资讯中心</div>
            <div class="sub-title">News Center</div>
            <div class="list">
                <div class="list-cell">
                    <img src="/img/home/news-1.png">
                    <div class="time">2021 / 05 / 31</div>
                    <p class="name">隐形车衣选购的常见问题有哪些</p>
                    <p class="txt">相信每一个有车的朋友，都想让自己的汽车看起来干净亮丽,但是汽车的耗损比较严重，尤其是开车比较多的朋友，开上两三年之后，有些车在外观上就看起来非常破旧</p>
                </div>
                <div class="list-cell">
                    <img src="/img/home/news-2.png">
                    <div class="time">2021 / 05 / 31</div>
                    <p class="name">银甲Pro隐形车衣有哪些防护作用</p>
                    <p class="txt">相信每一个有车的朋友，都想让自己的汽车看起来干净亮丽,但是汽车的耗损比较严重，尤其是开车比较多的朋友，开上两三年之后，有些车在外观上就看起来非常破旧</p>
                </div>
                <div class="list-cell">
                    <img src="/img/home/news-3.png">
                    <div class="time">2021 / 05 / 31</div>
                    <p class="name">汽车漆面保护膜具有哪些必要性</p>
                    <p class="txt">相信每一个有车的朋友，都想让自己的汽车看起来干净亮丽,但是汽车的耗损比较严重，尤其是开车比较多的朋友，开上两三年之后，有些车在外观上就看起来非常破旧</p>
                </div>
            </div>
        </div>
        <script>
            new Swiper('.swiper-container-detail_banner', {
                speed: 300,
                pagination: {
                    el: '.swiper-pagination_banner',
                    clickable: true
                },
                effect : 'fade',
                autoplay:true
            })
            new Swiper('.swiper-container-example', {
                speed: 300,
                effect : 'coverflow',
                slidesPerView: 3,
                centeredSlides: true,
                initialSlide: 1,
                pagination: {
                    el: '.swiper-pagination_banner',
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                autoplay:true
            })
        </script>
    </div>
    <footer class="footer">
        <div class="wrap">
            <div class="left-content">
                <img src="/img/logo.png">
                <div class="share">
                    <span class="name">分享：</span>
                    <span id="share-weibo"><img src="/img/share-icon-1.png"></span>
                    <span id="share-wx"><img src="/img/share-icon-2.png"></span>
                    <span id="share-qq"><img src="/img/share-icon-3.png"></span>
                </div>
            </div>
            <div class="right-content">
                <div class="link">　
                    <a href="/product.html" class="link-cell">产品介绍</a>
                    <a href="/quoted_part.html" class="link-cell">产品报价</a>
                    <a href="/distributor.html" class="link-cell">经销商登录</a>
                    <a href="/quailty.html" class="link-cell">质保查询</a>
                </div>
                <p class="phone">服务热线: <span>4001 618 615</span></p>
                <p class="record">2021@版权所有 拜亚(山东)薄膜有限公司<span>粤ICP备05108632号- 13 </span></p>
                <div class="qrcode">
                    <img src="/img/footer-qrcode.png">
                    <p>微信扫一扫</p>
                    <p>了解拜亚膜最新动态</p>
                </div>
            </div>
        </div>
        <div class="qrcode-wx" id="qrcode-wx" style="display: none;">
            <div class="title"><span>分享到微信朋友圈</span></div>
            <span class="close">+</span>
            <div id="qrcode-wx-img"></div>
            <div class="tip">打开微信“扫一扫”即可分享至朋友圈</div>
        </div>
    </footer>
    <script src="/js/share.js"></script>
</body>
</html>